<template>
  <div>
    <el-row class="login-container" justify="center" :align="'middle'">
      <el-card style="max-width: 480px;">
        <template #header>
          <div style="background-color: rgb(117, 181, 244);">
            <img :src="imgUrl" alt="">
          </div>
          
        </template>
        <div class="jump-link">
          <el-link @click="clickChange()">{{ formType ? '返回登陆' : '注册账号' }}</el-link>
        </div>
        <el-form ref="loginFormRef" :model="loginForm" label-width="auto" style="max-width: 600px">
            <!-- 手机号输入 -->
            <el-input v-model="loginForm.userName" style="width: 100%;margin-bottom: 10px;" prefix-icon="User"
              placeholder="Please input phone number" />
            <!-- 密码输入 -->
            <el-input v-model="loginForm.passWord" type="password" style="width: 100%;margin-bottom: 10px;"
              prefix-icon="Lock" placeholder="Please input password" clearable />

            <!-- 验证码输入 -->
            <el-input v-model="loginForm.validCode" v-if="formType" style="width: 100%;margin-bottom: 10px;"
              placeholder="Please input validCode" clearable>
              <template #append>
                <button @click="countdownChange" style="height: 100%;">{{ countdown.validCode }}</button>
              </template>
            </el-input>

            <!-- 提交按钮 -->
             <!-- 在按钮上显式设置 type="button"，避免触发表单默认提交：（修复了要点击两次才能成功登陆的问题） -->
              <!-- 在你的代码中，提交按钮没有显式设置 type="button"，导致它的默认类型是 submit。当点击按钮时：

                    ​触发默认提交行为
                    浏览器尝试向服务器提交表单（即使没有 <form action="..."> 也会尝试刷新当前页面）；
                    ​中断异步请求
                    页面刷新会导致正在执行的 login 请求被取消（表现为第一次点击失败，第二次可能因为浏览器缓存或巧合成功）。 -->
            <button type="button" @click="submitForm(loginFormRef)" style="width: 100%;background-color: #75b5f4;height: 40px;">{{
              formType ?
                "注册" : "登陆" }}</button>

        </el-form>
      </el-card>
    </el-row>

  </div>
</template>
<script setup>
import { reactive, ref, toRaw, computed } from 'vue'
import { getCode, getVerificationCode, login, menuPermissions } from '../../api'
import { useRouter } from 'vue-router'
import { useCounterStore } from '../../stores/menu'

const router = useRouter()

// 获取form实例
const loginFormRef = ref()


const menu = useCounterStore()

const routerList = computed(() => menu.routerList)
// 提交表单
const submitForm = async (formEl) => {

  // 
  // ElMessage.success('发送成功')
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // 注册页面
      if (formType.value) {
        getVerificationCode({
          userName: loginForm.userName,
          passWord: loginForm.passWord,
          validCode: loginForm.validCode

        }).then((data) => {
          if (data.data.code === 10000) {
            ElMessage.success('注册成功')
            // 注册成功切换到登陆页面
            formType.value = 0
          } else {
            ElMessage.error('注册失败')
          }
        })
      } else {
        // alert("点击了登陆")
        // 登陆页面
        login({
          userName: loginForm.userName,
          passWord: loginForm.passWord,
        }).then((data) => {
          console.log(data, 'login_data');
          if (data.data.code === 10000) {
            // ElMessage.success('登陆成功了哈')
            localStorage.setItem('token', data.data.data.token)
            localStorage.setItem('userInfo', JSON.stringify(data.data.data.userInfo))
            menuPermissions().then(({data:permission})=>{
              menu.dynamicMenu(permission.data)
              
              // toRaw将响应式数据转成普通对象，就可以addRoute
              toRaw(routerList.value).forEach(element => {
                // 将路由信息填充到main下
                router.addRoute('main', element)
                // console.log(element, 'element');
                
              });

              
            }).then(router.push('/'))
            
            
          } else {
            ElMessage.error('登陆失败了哈')

          }
        }).catch((error) => {
            console.error('登录请求失败:', error);
            ElMessage.error('请求发送失败');
          });
      }
    }
    else {

    }
  })

}
// 账号密码（预设值），接口验证码返回1234
const loginForm = reactive({
  userName: '15857731160',
  passWord: '123456',
  validCode: '1234'
})




// 切换表单(0为登录，1为注册)
const formType = ref(0)

function clickChange() {
  formType.value = formType.value ? 0 : 1
}


// 发送短信, 定时器的状态
let flag = false
// 下一次点击发送短信的时间
const waitTime = 5
const countdown = reactive({
    validCode: '获取验证码',
    time: waitTime
  })
// 获取验证码按钮的回调
const countdownChange = () => {
  // 防止重复点击
  if (flag) return

  // 校验手机号
  const phoneReg = /^1[3-9]\d{9}$/
  if (!phoneReg.test(loginForm.userName)) {
    return ElMessage({
      showClose: true,
      message: '请输入正确的手机号',
      type: 'error',
    })
  }

  // setInterval函数为异步操作
  const validCodeTimer = setInterval(() => {
    if (countdown.time <= 0) {
      countdown.time = waitTime
      countdown.validCode = '获取验证码'
      flag = false
      // 清除定时器
      clearInterval(validCodeTimer)
    } else {
      countdown.time--
      // 模板字符串
      countdown.validCode = `请等待${countdown.time}秒`
    }

  }, 1000)
  flag = true

  // 
  getCode({ tel: loginForm.userName }).then(data => {
    if (data.data.code === 10000) {
      ElMessage.success('验证码发送成功')
    }else{
      ElMessage.error('验证码发送失败')
    }
  })

}


// 登陆表单的背景图片
const imgUrl = new URL('../../../public/login-head.png', import.meta.url).href
</script>


<style lang="less" scoped>
.login-container {
  height: 100vh;

  /* 改为视口高度 */
  .el-card {
    margin: 0 auto;

    /* 居中卡片 */
    &__header {
      /* 原代码中的 .card-header */
      background-color: #899fe1;
      padding: 20px;
      /* 根据实际需求调整 */
      text-align: center;

      img {
        width: 430px;
        /* 保持原宽度 */
        max-width: 100%;
        /* 防止小屏溢出 */
        height: auto;
      }
    }
  }

  .jump-link {
    /* 原代码中的 jmp-link */
    text-align: right;
    margin-bottom: 10px;
    color: #666;
    /* 可自定义颜色 */
  }
}

// 去除#append组件的padding属性（0 20）， v-deep是深度选择器，穿透组件样式
::v-deep .el-input-group__append {
  padding: 0;
}
</style>